/*
 * @Description: 协议条款阅读
 * @Author: tao.xie
 * @Date: 2019-03-22 16:26:48
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-04-26 18:40:26
 */
<template>
  <div class="flex-h flex-vc flex-hc">
    <i
      @click="choose"
      class="icon iconfont icon-choose choose-wrapper"
      :class="check?'baseBgColorNoActive':'uncheck'"
    ></i>
    <span>阅读并同意</span>
    <a
      class="baseColorNoAcitve"
      href="http://static.xiaobu.hk/apppages/changzx/pay_agreement.html"
    >快捷支付协议</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      check: false
    }
  },
  methods: {
    choose: function () {
      this.check = !this.check
    },
    isChoosed: function () {
      return this.check
    }
  }
}
</script>

<style scoped>
/* 最外部包裹层 */
div {
  width: 750px;
}

/* 第一个文字 */
div span:first-of-type {
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
  color: #333;
  margin-left: 16px;
}
/* a标签 */
div a:nth-of-type(1) {
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
}
/* 选中包裹层 */
.choose-wrapper {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  color: #fff;
  /* font-size: 14px;no */
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  text-align: center;
}
.uncheck {
  background: #ccc;
}
</style>
